import 'package:flutter/material.dart';
import 'package:flutter_oa/product/product_item.dart';

class Product extends StatefulWidget {
  @override
  _ProductState createState() => _ProductState();
}

class _ProductState extends State<Product> with AutomaticKeepAliveClientMixin {
  List<bool> chosen = List();
  List<bool> chosenAll = List();
  var color1 = Colors.grey[400];
  var color2 = Colors.green;
  var productTitles = [
    '产品1',
    '产品2',
    '产品3',
    '产品4',
    '产品5',
  ];
  List<Widget> pages = List();

  var _controller = PageController(
    initialPage: 0,
  );

  @override
  void initState() {
    super.initState();
    for (var i = 0; i < productTitles.length; i++) {
      chosenAll.add(false);
    }
    chosen.addAll(chosenAll);
    chosen[0] = true;
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  _setPages() {
    for (var i = 0; i < productTitles.length; i++) {
      pages.add(ProductItem(title: '子产品$i'));
    }
    return pages;
  }

  _setTabs() {
    List<Widget> tabs = List();
    var color;
    for (var i = 0; i < productTitles.length; i++) {
      if (chosen[i]) {
        color = color2;
      } else {
        color = color1;
      }
      var tab = GestureDetector(
        onTap: () {
          setState(() {
            if (chosen[i]) {
            } else {
              chosen.clear();
              chosen.addAll(chosenAll);
              chosen[i] = true;
            }
            setState(() {
              _controller.jumpToPage(i);
            });
          });
        },
        child: Container(
          margin: EdgeInsets.fromLTRB(0, 1, 1, 1),
          color: Colors.white,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
          width: 100,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Container(
                width: 2,
                height: 25,
                color: color,
              ),
              Container(
                  width: 98,
                  child: Center(
                      child: Text(
                    productTitles[i],
                    style: TextStyle(color: color, fontSize: 16),
                  )))
            ],
          ),
        ),
      );
      tabs.add(tab);
    }
    return tabs;
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          elevation: 0,
          backgroundColor: Colors.white,
          automaticallyImplyLeading: false,
          actions: <Widget>[
            IconButton(
                icon: Icon(
                  Icons.more_horiz,
                  color: Colors.black,
                ),
                onPressed: () {})
          ],
          title: Text(
            '产品库',
            style: TextStyle(color: Colors.black54, fontSize: 20),
          ),
        ),
        body: Container(
          color: Colors.grey[200],
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Column(
                children: _setTabs(),
              ),
              Expanded(
                child: PageView(
                  controller: _controller,
                  children: _setPages(),
                  physics: NeverScrollableScrollPhysics(),
                ),
              ),
            ],
          ),
        ));
  }
}
